<template>
	<view>
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @click="InputFocus" type="text" placeholder="手机号/ID号"
				 confirm-type="search"></input>
			</view>
		</view>
		<view class="erweima" @tap="showModal" data-target="RadioModal">
			<view class="erweimaa">我的二维码</view>
			<image class="erweima_img" src="../../static/image/erweima.png"></image>
		</view>
		<view class="content">
			<view class="list">
				<image class="list_img1" src="../../static/image/syis.png"></image>
				<view class="list_con" @tap="sao">
					<view class="list_cona">扫一扫</view>
					<view class="list_conb">扫描好友的二维码</view>
				</view>
				<image class="list_img2" src="../../static/image/fanhui_21.png"></image>
			</view>
			<view class="list" @tap="tongxun">
				<image class="list_img1" src="../../static/image/tongxunlu.png"></image>
				<view class="list_con">
					<view class="list_cona">手机通讯录匹配</view>
					<view class="list_conb">匹配手机通讯录中的朋友</view>
				</view>
				<image class="list_img2" src="../../static/image/fanhui_21.png"></image>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='RadioModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<view class="list list2">
					<image class="head_img" :src="userinfo.avatar?userinfo.avatar:'../../static/image/bg_img.png'"></image>
					<view class="name">{{userinfo.nickname}}</view>
				</view>
				<view class="codes">
					<tki-qrcode
						class="code"
						ref= 'qrcode'
						:val='val'
						:size='size'
						:background = 'background'
						:icon = 'icon'
						:iconSize = 'iconSize'
						:onval = 'onval'
						:loadMake = 'loadMake'
					>
					</tki-qrcode>
				</view>
				<view class="jiawo">扫描上面的二维码，加我</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	export default {
		components:{
			tkiQrcode
		},
		data() {
			return {
				userinfo: null,
				modalName: null,
				val: '',
				size: 400,
				background: '#fff',
				icon: '',
				iconSize: 45,
				onval: true,
				loadMake: true
			}
		},
		onShow() {
			this.$msgchat.initwork();
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('userinfo') || {}
			if(this.userinfo.avatar){
				this.userinfo.avatar = this.$common.baseUrl + this.userinfo.avatar;
			}
			this.val = this.userinfo.id+',' + '1' ;
		},
		methods: {
			//扫一扫
			sao(){
				uni.scanCode({
				    success: function (res) {
				     let inarr = res.result;
				     let inx = inarr.indexOf(',');
				     let up = inarr.substring(0, inx);
				     let ty = inarr.substring(inx + 1);
				    if(ty == 1){
				    	uni.navigateTo({
				    		url: '/pages/applyAdd/applyAdd?uid=' + up
				    	})
				    }else{
				    	uni.navigateTo({
				    		url: '/pages/applyAddGroup/applyAddGroup?groupnum=' + up 
				    	})
				    }
				    }
				});
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			//通讯录
			tongxun(){
				uni.navigateTo({
					url: '/pages/selectContacts/selectContacts'
				})
			},
			InputFocus(){
				uni.navigateTo({
					url:'../add/add'
				})
			}

		}
	}
</script>

<style>
	page {
		width: 100vw;
		background: #F5F4F9;
	}

	.bg-white {
		background: #F5F4F9;
	}
	
	.round {
		border-radius: 10upx !important;
		background: #FFF;
		height: 80upx;
		margin: 30upx;
	}

	.erweima {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 40upx;
	}

	.erweima_img {
		width: 40upx;
		height: 40upx;
		margin: 0 10upx;
	}

	.content {
		padding: 0 30upx;
		background: #FFFFFF;
	}

	.list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #F5F4F9;
		padding: 20upx 0;
	}

	.list_img1 {
		width: 50upx;
		height: 50upx;
	}

	.list_img2 {
		width: 20upx;
		height: 30upx;
	}

	.list_con {
		width: 75%;
	}

	.list_conb {
		font-size: 30upx;
		color: #A4A4A4;
		padding-top: 10upx;
	}

	.cu-dialog {
		padding: 30upx;
	}

	.list2 {
		justify-content: flex-start !important;
	}

	.head_img {
		width: 120upx;
		height: 120upx;
		border-radius: 50%;
	}

	.name {
		margin-left: 20upx;
	}

	.codes {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 40upx;
	}

	.jiawo {
		padding: 90upx 0 20upx 0;
	}
</style>
